<!--
 * hi-badge - 徽标数
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="page-view">
        <!-- 基础使用 -->
        <module-demo title="基础使用">
            <view class="box">
                <hi-badge :value="199"></hi-badge>
            </view>
        </module-demo>

        <!-- 显示边框 -->
        <module-demo title="显示边框">
            <view class="box">
                <hi-badge :value="199" border></hi-badge>
            </view>
        </module-demo>

        <!-- 应用主题 -->
        <module-demo title="应用主题">
            <view class="box">
                <hi-badge :value="99" theme="primary"></hi-badge>
                <hi-badge :value="199" theme="success"></hi-badge>
                <hi-badge :value="999" theme="warning"></hi-badge>
                <hi-badge :value="1999" theme="error"></hi-badge>
                <hi-badge :value="19999" theme="info"></hi-badge>
            </view>
        </module-demo>

        <!-- 镂空 -->
        <module-demo title="镂空">
            <view class="box">
                <hi-badge plain :value="99" theme="primary"></hi-badge>
                <hi-badge plain :value="199" theme="success"></hi-badge>
                <hi-badge plain :value="999" theme="warning"></hi-badge>
                <hi-badge plain :value="1999" theme="error"></hi-badge>
                <hi-badge plain :value="19999" theme="info"></hi-badge>
            </view>
        </module-demo>

        <!-- 浅化背景 -->
        <module-demo title="浅化背景">
            <view class="box">
                <hi-badge tint :value="99" theme="primary"></hi-badge>
                <hi-badge tint :value="199" theme="success"></hi-badge>
                <hi-badge tint :value="999" theme="warning"></hi-badge>
                <hi-badge tint :value="1999" theme="error"></hi-badge>
                <hi-badge tint :value="19999" theme="info"></hi-badge>
            </view>
        </module-demo>

        <!-- 边框 + 浅化 -->
        <module-demo title="边框 + 浅化 + 主题">
            <view class="box">
                <hi-badge tint border :value="99" theme="primary"></hi-badge>
                <hi-badge tint border :value="199" theme="success"></hi-badge>
                <hi-badge tint border :value="999" theme="warning"></hi-badge>
                <hi-badge tint border :value="1999" theme="error"></hi-badge>
                <hi-badge tint border :value="19999" theme="info"></hi-badge>
            </view>
        </module-demo>

        <!-- 圆点模式 -->
        <module-demo title="圆点模式">
            <view class="box">
                <hi-badge mode="dot" dotSize="8px" :value="99" theme="primary"></hi-badge>
                <hi-badge mode="dot" dotSize="8px" :value="199" theme="success"></hi-badge>
                <hi-badge mode="dot" dotSize="8px" :value="999" theme="warning"></hi-badge>
                <hi-badge mode="dot" dotSize="8px" :value="1999" theme="error"></hi-badge>
                <hi-badge mode="dot" dotSize="8px" :value="19999" theme="info"></hi-badge>
            </view>
        </module-demo>

        <!-- overflow 模式 -->
        <module-demo title="overflow 模式">
            <view class="box">
                <hi-badge :value="99" mode="overflow" theme="primary"></hi-badge>
                <hi-badge :value="199" mode="overflow" theme="success"></hi-badge>
            </view>
        </module-demo>

        <!-- ellipsis 模式 -->
        <module-demo title="ellipsis 模式">
            <view class="box">
                <hi-badge :value="99" mode="ellipsis" theme="warning"></hi-badge>
                <hi-badge :value="199" mode="ellipsis" theme="error"></hi-badge>
            </view>
        </module-demo>

        <!-- limit 模式 -->
        <module-demo title="limit 模式">
            <view class="box">
                <hi-badge :value="1999" mode="limit" theme="info"></hi-badge>
                <hi-badge :value="19999" mode="limit" theme="primary"></hi-badge>
                <hi-badge :value="19999" mode="limit" suffix="千" theme="success"></hi-badge>
                <hi-badge :value="19999" mode="limit" suffix="w" theme="warning"></hi-badge>
                <hi-badge :value="19999" mode="limit" suffix="万" theme="error"></hi-badge>
            </view>
        </module-demo>

        <!-- 自定义背景 -->
        <module-demo title="自定义背景">
            <view class="box">
                <hi-badge :value="199" bg="#ff0000" color="#ffffff"></hi-badge>
                <hi-badge :value="199" bg="linear-gradient(90deg, #ff9900 0%, #ff00ff 100%)" color="#ffffff"></hi-badge>
            </view>
        </module-demo>

        <!-- 自定义颜色 -->
        <module-demo title="自定义颜色">
            <view class="box">
                <hi-badge :value="199" color="#ff0000"></hi-badge>
                <hi-badge :value="199" color="#ff9900"></hi-badge>
            </view>
        </module-demo>

        <!-- 自定义文字大小 -->
        <module-demo title="自定义文字大小">
            <view class="box">
                <hi-badge :value="199" fontSize="15px" theme="primary"></hi-badge>
                <hi-badge :value="199" fontSize="20px" theme="success"></hi-badge>
            </view>
        </module-demo>

        <!-- 自定义宽高 -->
        <module-demo title="自定宽高">
            <view class="box">
                <hi-badge :value="199" width="80px" theme="warning"></hi-badge>
                <hi-badge :value="199" height="1.5em" theme="error"></hi-badge>
            </view>
        </module-demo>

        <!-- 自定义圆点大小 -->
        <module-demo title="自定义圆点大小" tips="可以通过 dotSize 或者 height 属性设置圆点大小">
            <view class="box">
                <hi-badge :value="199" mode="dot" height="10px" theme="info"></hi-badge>
                <hi-badge :value="199" mode="dot" dotSize="15px" theme="primary"></hi-badge>
            </view>
        </module-demo>

        <!-- 自定义边框样式 -->
        <module-demo title="自定义边框样式">
            <view class="box">
                <hi-badge :value="199" border borderColor="#ff9900"></hi-badge>
                <hi-badge :value="199" border borderColor="#0099ff" borderWidth="3px"></hi-badge>
                <hi-badge :value="199" border borderColor="#ff9900" borderStyle="dashed"></hi-badge>
            </view>
        </module-demo>

        <!-- 自定义圆角大小 -->
        <module-demo title="自定义圆角大小">
            <view class="box">
                <hi-badge :value="199" theme="success" radius="0px"></hi-badge>
                <hi-badge :value="199" theme="warning" radius="6px"></hi-badge>
            </view>
        </module-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";
</script>

<style lang="scss" scoped>
    .box {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        position: relative;
    }
</style>
